<template>
    <div class="person-viewer">
      <!-- Search Section -->
      <div class="search-section">
        <div class="search-container">
          <input v-model="searchQuery" type="text" class="search-input" placeholder="搜索人物..." @keyup.enter="searchPerson">
          <button class="search-button" @click="searchPerson">
            搜索
          </button>
        </div>
      </div>
  
      <div class="content-container">
        <!-- Chart Section - 左边 -->
        <div class="chart-section" style="height: calc(100vh - 145px);" :class="{ 'fullscreen': isFullscreen }">
          <div class="chart-card">
            <h2 class="card-title">
              关系图谱
            </h2>
  
            <div v-if="selectedPerson" id="main" ref="chartContainer" class="chart-container">
              <div v-if="loading" class="loading-overlay">
                <div class="loading-spinner"></div>
                <div class="loading-text">加载中...</div>
              </div>
            </div>
            <div v-else class="chart-container empty-chart">
              <div class="empty-chart-content">
                <h3 class="empty-title">
                  暂无关系图谱数据
                </h3>
                <p class="empty-desc">
                  请在左侧搜索框中输入人物姓名并点击搜索按钮
                </p>
              </div>
            </div>
            <div v-if="chartError" class="chart-error">
              图表加载失败: {{ chartError }}
            </div>
          </div>
        </div>
  
        <!-- Person Information Section - 右边 -->
        <div v-show="!isFullscreen" class="info-section" style="height: calc(100vh - 145px);">
          <div class="info-card" style="height: 60%; overflow-y: auto; height: 60%;">
            <h2 class="card-title">
              个人信息
            </h2>
            <div v-if="selectedPerson" class="info-content">
              <div class="info-item">
                <span class="info-label">姓名:</span>
                <span class="info-value">{{ selectedPerson.name }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">性别:</span>
                <span class="info-value">{{ selectedPerson.gender }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">民族:</span>
                <span class="info-value">{{ selectedPerson.ethnicity }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">政治面貌:</span>
                <span class="info-value">{{ selectedPerson.political_status }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">婚姻状态:</span>
                <span class="info-value">{{ selectedPerson.marital_status }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">出生日期:</span>
                <span class="info-value">{{ selectedPerson.birth_date }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">入党时间:</span>
                <span class="info-value">{{ selectedPerson.party_join_date }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">入伍时间:</span>
                <span class="info-value">{{ selectedPerson.enlistment_date }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">退伍时间:</span>
                <span class="info-value">{{ selectedPerson.discharge_date }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">籍贯:</span>
                <span class="info-value">{{ selectedPerson.native_place }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">学历:</span>
                <span class="info-value">{{ selectedPerson.education }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">毕业院校:</span>
                <span class="info-value">{{ selectedPerson.graduation_institution }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">专业技能及特长:</span>
                <span class="info-value">{{ selectedPerson.skills_and_expertise }}</span>
              </div>
            </div>
            <div v-else class="info-content empty-info">
              <div class="empty-info-content">
                <h3 class="empty-title">
                  暂无个人信息
                </h3>
                <p class="empty-desc">
                  搜索人物后将显示详细信息
                </p>
              </div>
            </div>
          </div>
  
          <!-- Events Section -->
          <div class="events-card" style="height: 40%; overflow-y: auto;">
            <h2 class="card-title">
              人物事件
            </h2>
            <div class="events-content">
              <div class="event-tabs-wrapper">
                <div class="event-tabs">
                  <div v-for="(tab, index) in eventTabs" :key="index"
                    :class="['event-tab', { active: activeTab === tab.type }]" @click="activeTab = tab.type">
                    {{ tab.name }}
                  </div>
                </div>
                <!-- 左右滚动指示器 -->
                <div class="tab-scroll-indicator tab-scroll-left" @click="scrollTabs('left')">
                  <i class="el-icon-arrow-left"></i>
                </div>
                <div class="tab-scroll-indicator tab-scroll-right" @click="scrollTabs('right')">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div v-if="selectedPerson" class="event-list">
                <div v-for="(event, index) in filteredEvents" :key="index" class="event-item">
                  <div class="event-date">
                    {{ event.date }}
                  </div>
                  <div class="event-content">
                    <div class="event-title">
                      {{ event.title }}
                    </div>
                    <div class="event-description">
                      {{ event.description }}
                    </div>
                  </div>
                </div>
                <div v-if="filteredEvents.length === 0" class="no-events">
                  暂无相关事件
                </div>
              </div>
              <div v-else class="event-list empty-events" style="min-height:50px !important">
                <div class="empty-events-content">
                  <h3 class="empty-title">
                    暂无事件数据
                  </h3>
                  <p class="empty-desc">
                    搜索人物后将显示相关事件
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" :fullscreen="true" :modal="true"
        :show-close="true" custom-class="fullscreen-dialog">
        <div id="mainfull" ref="chartmainfull" class="full-screen-chart" />
      </el-dialog>
    </div>
  </template>
  
  <script>
  import MilitaryRankIcon from '@/assets/icons/military-rank.svg'
  import gbrm from '@/assets/icons/gbrm.svg'
  import jc from '@/assets/icons/jc.svg'
  import pj from '@/assets/icons/pj.svg'
  import xgjg from '@/assets/icons/xgjg.svg'
  import grxx from '@/assets/icons/grxx.svg'
  import zydj from '@/assets/icons/zydj.svg'
  import jx from '@/assets/icons/jx.svg'
  import xgrw from '@/assets/icons/xgrw.svg'
  import xgda from '@/assets/icons/xgda.svg'
  import zhongxin from '@/assets/icons/zhongxin.svg'
  import zzlsbq from '@/assets/icons/zzlsbq.svg'
  import xgsj from '@/assets/icons/xgsj.svg'
  import { personApi } from "@/api/p"
  var option = null
  
  export default {
    name: 'PersonViewer',
    data() {
      return {
        dialogVisible: false,
        searchQuery: '',
        selectedPerson: null,
        activeTab: 'all',
        eventTabs: [
          { name: '全部', type: 'all' },
          { name: '晋升情况', type: 'jssj' },
          { name: '奖惩情况', type: 'jcsj' },
          { name:'任职情况', type: 'rzsj' },
          { name: '出国情况', type: 'cgsj' },
          { name: '社会关系', type: 'xgsj' },
        ],
        chart: null,
        chartError: null,
        echartsLoaded: false,
        loading: false,
        neo4jData: null,
        expandedNodes: new Set(), // 存储已展开的节点ID
        originData: null, // 存储原始完整数据
        // 颜色映射
        colorMap: {
          center: {
            main: '#1890FF',
            gradient: new Array(2) // 将在初始化时填充
          },
          person: {
            main: '#52C41A',
            gradient: new Array(2)
          },
          org: {
            main: '#FA8C16',
            gradient: new Array(2)
          }
        },
        zoomLevel: 1,
        isFullscreen: false,
  
        options: {
          "title": {
            "text": "",
            "textStyle": {
              "color": "white"
            },
            "left": "0px",
            "top": "0px"
          },
          "tooltip": {
            trigger: 'item',
            "show": true,
            formatter: function (params) {
              // params.data 包含当前节点的数据
              console.log(params)
  
              let str = ''
  
              str += params.data.name + '<br/>'
              if (params.data.nodeInfo.reason) {
                str += '原因：' + params.data.nodeInfo.reason + '<br/>'
              }
  
              if (params.data.nodeInfo.event_type) {
                str += '事件类型：' + params.data.nodeInfo.event_type + '<br/>'
              }
  
              return str;
            }
          },
          "legend": {
            "show": true,
            "data": [
              "SPOUSE",
              "担任",
              "参加工作",
              "具有",
              "拟任",
              "生于",
              "是",
              "获得"
            ],
            "selectedMode": "multiple",
            "left": "10px",
            "bottom": "10px",
            "icon": "circle",
            "orient": "vertical",
            "itemWidth": 16,
            "itemHeight": 16,
            "itemGap": 10
          },
          "toolbox": {
            "show": true,
            "feature": {
              "saveAsImage": {
                "name": "知识图谱",
                "type": "png",
                "backgroundColor": "#fff"
              },
              "restore": {
                "title": "刷新"
              },
              "myTool": {
                "show": true,
                "title": "全屏",
                "icon": "path://M641.750109 384.100028l205.227128-204.519-0.704035 115.89966c-0.282433 9.611915 7.489578 18.09103 17.101493 17.808598l12.297071 0c9.611915-0.283456 17.667382-5.936199 17.808598-15.689331l0.565888-172.57752c0-0.14224 0.282433-9.187243 0.282433-9.187243 0.14224-4.804423-0.99056-9.187243-4.100388-12.297071-3.109828-3.109828-7.347339-5.086855-12.297071-4.946662l-8.763594 0.14224c-0.141216 0-0.278339 0-0.420579 0.14224L697.581696 98.166787c-9.611915 0.283456-17.667382 8.200776-17.808598 17.950837l0 12.297071c1.416256 11.44875 10.458189 18.092054 20.070104 17.808598l112.789832 0.283456-204.66124 203.814965c-9.329483 9.329483-9.329483 24.449855 0 33.778314 9.329483 9.470699 24.452925 9.470699 33.782408 0L641.750109 384.100028zM383.095141 576.889893 177.726797 780.705881l0.707105-115.338888c0.283456-9.607822-7.492648-18.086937-17.104563-17.808598l-13.001105 0c-9.611915 0.283456-17.667382 5.937223-17.808598 15.690354l-0.565888 172.718737c0 0.14224-0.282433 9.187243-0.282433 9.187243-0.14224 4.808516 0.99056 9.187243 4.096295 12.297071 3.109828 3.109828 7.351432 5.086855 12.297071 4.946662l8.762571-0.14224c0.14224 0 0.283456 0 0.425695-0.14224l171.873486 0.708128c9.607822-0.283456 17.667382-8.196683 17.808598-17.950837L344.93503 832.575226c-1.415232-11.44875-10.461259-18.092054-20.074198-17.808598L212.069977 814.483172 416.59 610.671277c9.329483-9.329483 9.329483-24.453948 0-33.782408C407.40685 567.41817 392.424624 567.41817 383.095141 576.889893L383.095141 576.889893zM894.047276 835.967486l-0.424672-172.718737c-0.283456-9.612938-8.200776-15.406898-17.809621-15.690354l-12.296047 0c-9.612938-0.278339-17.243733 8.200776-17.105586 17.808598l0.708128 115.903753L641.750109 576.889893c-9.329483-9.329483-24.452925-9.329483-33.782408 0-9.325389 9.328459-9.325389 24.452925 0 33.782408L812.490795 814.483172l-112.789832 0.283456c-9.611915-0.283456-18.515702 6.502088-20.073174 17.808598l0 12.297071c0.282433 9.611915 8.200776 17.667382 17.808598 17.950837l171.166381-0.708128c0.141216 0 0.282433 0.14224 0.424672 0.14224l8.763594 0.14224c4.803399 0.141216 9.187243-1.694595 12.296047-4.946662 3.109828-3.109828 4.238534-7.488555 4.097318-12.297071 0 0-0.14224-9.046027-0.14224-9.187243L894.047276 835.968509zM212.216309 146.506748l112.789832-0.283456c9.607822 0.283456 18.512632-6.502088 20.070104-17.808598L345.076246 116.116601c-0.283456-9.611915-8.196683-17.667382-17.808598-17.950837l-172.011632 0.708128c-0.14224 0-0.283456-0.14224-0.425695-0.14224l-8.761548-0.14224c-4.808516-0.141216-9.187243 1.694595-12.297071 4.946662-3.109828 3.109828-4.242627 7.488555-4.096295 12.297071 0 0 0.282433 9.046027 0.282433 9.187243l0.420579 172.718737c0.14224 9.608845 8.200776 15.406898 17.808598 15.686261l13.005198 0c9.611915 0.282433 17.242709-8.196683 17.10047-17.808598l-0.564865-115.334795 205.231221 203.958228c9.324366 9.329483 24.448832 9.329483 33.777291 0 9.329483-9.329483 9.329483-24.452925 0-33.782408L212.216309 146.506748 212.216309 146.506748zM212.216309 146.506748",
  
                onclick: () => {
                  this.clickFullScreen(); // 使用箭头函数保持正确的 this 上下文
                },
  
              }
            },
            "right": "10px",
            "bottom": "10px",
            "orient": "vertical",
            "itemGap": 10
          },
          "xAxis": {
            "show": false
          },
          "yAxis": {
            "show": false
          },
          "grid": {
            "top": "80px"
          },
          "series": [
            {
              "type": "graph",
              "roam": true,
              "focusNodeAdjacency": true,
              "force": {
                "repulsion": 2000,
                "edgeLength": [
                  1000,
                  300
                ]
              },
              "edgeSymbol": [
                "circle",
                "arrow"
              ],
              "edgeSymbolSize": [
                4,
                10
              ],
              "lineStyle": {
                "color": "black",
                "width": 1,
                "fontSize": 12,
                "normal": {
                  "cursor": "default"
                }
              },
              "layout": "force",
              "symbol": "circle",
              "normal": {
                "lineStyle": {
                  "color": "black",
                  "width": 1,
                  "type": "solid",
                  "opacity": 1,
                  "curveness": 0.5
                }
              },
              "label": {
                "normal": {
                  "show": true,
                  "position": "bottom",
                  rich: {
                    bg: {
                      padding: [3, 5], // 调整内边距
                      borderRadius: 4, // 圆角
                      backgroundColor: '#52606d', // 背景颜色
                      borderColor: '#333', // 边框颜色
                      borderWidth: 1, // 边框宽度
                      color: '#fff' // 文字颜色
                    }
                  },
                  "textStyle": {
                    "fontSize": 10,
                    "color": "black"
                  }
                }
              },
              "edgeLabel": {
                "normal": {
                  "show": true,
                  "textStyle": {
                    "fontSize": 10,
                    "color": "black"
                  }
                }
              },
              "data": [
                {
                  "name": "王程杰",
                  "nodeInfo": {
                    "id": 77,
                    "name": "王程杰",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#fac455",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                  "symbol": "path://M540.458667 58.794667a426.666667 426.666667 0 1 0 426.666666 426.666666 426.666667 426.666667 0 0 0-426.666666-426.666666z m-248.917334 693.333333a248.917333 248.917333 0 0 1 248.917334-248.917333A142.208 142.208 0 1 1 682.666667 361.002667a142.208 142.208 0 0 1-142.208 142.208A248.917333 248.917333 0 0 1 789.333333 752.128H291.541333z"
                },
  
                {
                  "name": "个人信息",
                  "nodeInfo": {
                    "id": 100,
                    "name": "个人信息",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#fac455",
                    // "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
  
                  "symbol": "image://" + grxx
  
                },
  
                {
                  "name": "30岁",
                  "nodeInfo": {
                    "id": 101,
                    "name": "30岁",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#fac455",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
  
                },
  
                {
                  "name": "男",
                  "nodeInfo": {
                    "id": 101,
                    "name": "男",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#fac455",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                },
  
                {
                  "name": "汉",
                  "nodeInfo": {
                    "id": 102,
                    "name": "汉",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#fac455",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                },
  
                {
                  "name": "李文静",
                  "nodeInfo": {
                    "id": 103,
                    "name": "李文静",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#fac455",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                },
  
                {
                  "name": "中电光谷",
                  "nodeInfo": {
                    "id": 104,
                    "name": "中电光谷",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#fac455",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                },
  
                {
                  "name": "技术主管",
                  "nodeInfo": {
                    "id": 105,
                    "name": "技术主管",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#fac455",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                },
  
  
                {
                  "name": "中校",
                  "nodeInfo": {
                    "id": 106,
                    "name": "中校",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#fac455",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                },
  
                {
                  "name": "中共党员",
                  "nodeInfo": {
                    "id": 107,
                    "name": "中共党员",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#fac455",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                },
  
  
                {
                  "name": "已婚",
                  "nodeInfo": {
                    "id": 108,
                    "name": "已婚",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#fac455",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                },
  
                {
                  "name": "1990-01-01",
                  "nodeInfo": {
                    "id": 109,
                    "name": "1990-01-01",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#fac455",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                },
  
  
                {
                  "name": "2010-01-01",
                  "nodeInfo": {
                    "id": 110,
                    "name": "2010-01-01",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#fac455",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                },
  
                {
                  "name": "885812",
                  "nodeInfo": {
                    "id": 111,
                    "name": "885812",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#fac455",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                },
                //机构
                {
                  "name": "相关机构",
                  "nodeInfo": {
                    "id": 120,
                    "name": "相关机构",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#f26667",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                  "symbol": "image://" + xgjg
  
                },
  
                {
                  "name": "华东军区征兵办",
                  "nodeInfo": {
                    "id": 141,
                    "name": "华东军区征兵办",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#f26667",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ]
  
                },
  
                {
                  "name": "某集团军新兵训练中心",
                  "nodeInfo": {
                    "id": 142,
                    "name": "某集团军新兵训练中心",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#f26667",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ]
  
                },
  
                {
                  "name": "第74集团军某步兵旅",
                  "nodeInfo": {
                    "id": 142,
                    "name": "第74集团军某步兵旅",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#f26667",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ]
  
                },
  
                {
                  "name": "退役军人事务部广州办事处",
                  "nodeInfo": {
                    "id": 143,
                    "name": "退役军人事务部广州办事处",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#f26667",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ]
  
                },
  
                {
                  "name": "相关人物",
                  "nodeInfo": {
                    "id": 150,
                    "name": "相关人物",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#1296db",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                  "symbol": "image://" + xgrw
  
                },
  
  
  
                {
                  "name": "征兵官张驰",
                  "nodeInfo": {
                    "id": 151,
                    "name": "征兵官张驰",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#1296db",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
  
                },
  
  
                {
                  "name": "训练教官李兵",
                  "nodeInfo": {
                    "id": 153,
                    "name": "训练教官李兵",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#1296db",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                },
  
  
                {
                  "name": "技能培训师赵小龙",
                  "nodeInfo": {
                    "id": 154,
                    "name": "技能培训师赵小龙",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#1296db",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
  
                },
  
  
                {
                  "name": "军衔",
                  "nodeInfo": {
                    "id": 160,
                    "name": "军衔",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "green",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                  "symbol": "image://" + jx,
                  // ... existing code ...
                },
  
  
                {
                  "name": "从少校晋升中校",
                  "nodeInfo": {
                    "id": 161,
                    "name": "从少校晋升中校",
                    "type": "Zdby.Person",
                    "reason": "年度考核优秀/工作表现突出",
                    "event_type": "晋升"
                  },
                  "itemStyle": {
                    "color": "green",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
  
                  // ... existing code ...
                },
  
  
  
                {
                  "name": "职位任免",
                  "nodeInfo": {
                    "id": 160,
                    "name": "职位任免",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "green",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                  "symbol": "image://" + gbrm,
                  // ... existing code ...
                },
  
                {
                  "name": "温岭市人大常委会办公室副主任变更为预算工作委员会委员",
                  "nodeInfo": {
                    "id": 160,
                    "name": "温岭市人大常委会办公室副主任变更为预算工作委员会委员",
                    "type": "Zdby.Person",
                    "reason": "工作需要",
                    "event_type": "任免"
                  },
                  "itemStyle": {
                    "color": "#d4257a",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
  
                  // ... existing code ...
                },
  
  
  
                {
                  "name": "奖惩",
                  "nodeInfo": {
                    "id": 171,
                    "name": "奖惩",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "green",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                  "symbol": "image://" + jc,
                  // ... existing code ...
                },
  
  
                {
                  "name": "安徽省五一劳动奖章",
                  "nodeInfo": {
                    "id": 172,
                    "name": "安徽省五一劳动奖章",
                    "type": "Zdby.Person",
                    "reason": "工作表现突出",
                    "event_type": "奖励"
                  },
                  "itemStyle": {
                    "color": "#fdc991",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                },
  
                {
                  "name": "记过处分",
                  "nodeInfo": {
                    "id": 173,
                    "name": "记过处分",
                    "type": "Zdby.Person",
                    "reason": "违反部队管理规定，擅自离岗外出，未履行请假手续；不遵守保密纪律，在非保密场所谈论涉密事项。",
                    "event_type": "惩处"
                  },
                  "itemStyle": {
                    "color": "#fdc991",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                },
  
  
                {
                  "name": "评级",
                  "nodeInfo": {
                    "id": 180,
                    "name": "评级",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "green",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
                  "symbol": "image://" + zydj,
                  // ... existing code ...
                },
  
  
  
                {
                  "name": "自专业三级晋升至专业四级",
                  "nodeInfo": {
                    "id": 181,
                    "name": "自专业三级晋升至专业四级",
                    "type": "Zdby.Person",
                    "reason": "表现卓越、贡献突出",
                    "event_type": "评级"
                  },
                  "itemStyle": {
                    "color": "#ff9a2e",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
  
                },
  
                {
                  "name": "相关档案",
                  "nodeInfo": {
                    "id": 200,
                    "name": "相关档案",
                    "type": "Zdby.Person"
                  },
                  "itemStyle": {
                    "color": "#fac455",
                    // "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
  
                  "symbol": "image://" + xgda
  
                },
  
                {
                  "name": "FZ02-Y-WS-W1955-001-002",
                  "nodeInfo": {
                    "id": 202,
                    "name": "FZ02-Y-WS-W1955-001-002",
                    "type": "Zdby.Person",
  
                  },
                  "itemStyle": {
                    "color": "#9fd1d8",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
  
                },
  
                {
                  "name": "FZ02-Y-WS-W1999-003-002",
                  "nodeInfo": {
                    "id": 201,
                    "name": "FZ02-Y-WS-W1999-003-002",
                    "type": "Zdby.Person",
  
                  },
                  "itemStyle": {
                    "color": "#9fd1d8",
                    "borderColor": "#000000",
                    "borderWidth": 1
                  },
                  "draggable": true,
                  "symbolSize": [
                    30,
                    30
                  ],
  
                },
  
  
  
  
  
  
  
  
  
  
  
              ],
              "categories": [
                {
                  "name": "个人属性"
                },
                {
                  "name": "年龄"
                },
                {
                  "name": "性别"
                },
                {
                  "name": "民族"
                },
                {
                  "name": "配偶"
                },
                {
                  "name": "机构"
                },
                {
                  "name": "职务"
                },
                {
                  "name": "军衔"
                },
                {
                  "name": "政治面貌"
                },
                {
                  "name": "婚姻状态"
                },
                {
                  "name": "出生日期"
                },
                {
                  "name": "入党时间"
                },
                {
                  "name": "电话号码"
                },
                {
                  "name": "相关机构"
                },
  
                {
                  "name": "入伍报名及体检"
                },
  
                {
                  "name": "接受基础军事训练"
                },
  
                {
                  "name": "服役执行任务"
                },
  
                {
                  "name": "退役安置"
                },
  
                {
                  "name": "相关人物"
                },
  
                { "name": "入伍手续办理" },
  
                { "name": "基础军事训练指导" },
  
                { "name": "专业技能提升培训" },
  
                { "name": "相关军衔" },
                { "name": "军衔晋升" },
                { "name": "相关职位" },
                { "name": "职位变更" },
                { "name": "相关奖惩" },
                { "name": "奖励" },
                { "name": "惩处" },
                { "name": "相关评级" },
  
                { "name": "评级" },
                { "name": "相关档案" },
                { "name": "来源" }
  
  
              ],
              "links": [
  
                {
                  category: "个人属性",
                  target: "王程杰",
                  source: "个人信息"
                },
                {
                  category: "年龄",
                  target: "个人信息",
                  source: "30岁"
                },
                {
                  category: "性别",
                  target: "个人信息",
                  source: "男"
                },
                {
                  category: "民族",
                  target: "个人信息",
                  source: "汉"
                },
                {
                  category: "配偶",
                  target: "个人信息",
                  source: "李文静"
                },
                {
                  category: "机构",
                  target: "个人信息",
                  source: "中电光谷"
                },
                {
                  category: "职务",
                  target: "个人信息",
                  source: "技术主管"
                },
                {
                  category: "军衔",
                  target: "个人信息",
                  source: "中校"
                },
  
                {
                  category: "政治面貌",
                  target: "个人信息",
                  source: "中共党员"
                },
                {
                  category: "婚姻状态",
                  target: "个人信息",
                  source: "已婚"
                },
                {
                  category: "出生日期",
                  target: "个人信息",
                  source: "1990-01-01"
                },
                {
                  category: "入党时间",
                  target: "个人信息",
                  source: "2010-01-01"
                },
                {
                  category: "电话号码",
                  target: "个人信息",
                  source: "885812"
                },
                {
                  category: "相关机构",
                  target: "王程杰",
                  source: "相关机构"
                },
  
                {
                  category: "入伍报名及体检",
                  target: "相关机构",
                  source: "华东军区征兵办"
                },
  
                {
                  category: "接受基础军事训练",
                  target: "相关机构",
                  source: "某集团军新兵训练中心"
                },
  
                {
                  category: "服役执行任务",
                  target: "相关机构",
                  source: "第74集团军某步兵旅"
                },
  
                {
                  category: "退役安置",
                  target: "相关机构",
                  source: "退役军人事务部广州办事处"
                },
  
                {
                  category: "相关人物",
                  target: "王程杰",
                  source: "相关人物"
                },
  
                {
                  category: "入伍手续办理",
                  target: "相关人物",
                  source: "征兵官张驰"
                },
  
                {
                  category: "基础军事训练指导",
                  target: "相关人物",
                  source: "训练教官李兵"
                },
  
                {
                  category: "专业技能提升培训",
                  target: "相关人物",
                  source: "技能培训师赵小龙"
                },
  
                {
                  category: "相关军衔",
                  target: "王程杰",
                  source: "军衔"
                },
  
                {
                  category: "军衔晋升",
                  target: "军衔",
                  source: "从少校晋升中校"
                },
  
                {
                  category: "相关职位",
                  target: "王程杰",
                  source: "职位任免"
                },
  
                {
                  category: "职位变更",
                  target: "职位任免",
                  source: "温岭市人大常委会办公室副主任变更为预算工作委员会委员"
                },
  
                {
                  category: "相关奖惩",
                  target: "王程杰",
                  source: "奖惩"
                },
  
                {
                  category: "奖励",
                  target: "奖惩",
                  source: "安徽省五一劳动奖章"
                },
  
                {
                  category: "惩处",
                  target: "奖惩",
                  source: "记过处分"
                },
  
                {
                  category: "相关评级",
                  target: "王程杰",
                  source: "评级"
                },
  
                {
                  category: "评级",
                  target: "评级",
                  source: "自专业三级晋升至专业四级"
                },
  
                {
                  category: "相关档案",
                  target: "王程杰",
                  source: "相关档案"
  
                },
                {
                  category: "来源",
                  target: "相关档案",
                  source: "FZ02-Y-WS-W1955-001-002"
                },
                {
                  category: "来源",
                  target: "相关档案",
                  source: "FZ02-Y-WS-W1999-003-002"
                }
  
              ]
            }
          ]
        }
  
  
      }
    },
    computed: {
      filteredEvents() {
        if (!this.selectedPerson) return [];
  
        if (this.activeTab === 'all') {
          return this.selectedPerson.events;
        } else {
          return this.selectedPerson.events.filter(event => event.type === this.activeTab);
        }
      }
    },
    mounted() {
      // 在组件挂载后立即加载ECharts
      this.loadECharts();
  
      // 监听ESC键退出全屏
      document.addEventListener('keydown', this.handleKeyDown);
  
      // 添加窗口大小改变监听
      window.addEventListener('resize', this.resizeChart);
    },
    beforeDestroy() {
      // 清理图表实例
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
  
      // 移除事件监听
      window.removeEventListener('resize', this.resizeChart);
      document.removeEventListener('keydown', this.handleKeyDown);
    },
    methods: {
      quickSearch(name) {
        this.searchQuery = name;
        this.searchPerson();
      },
      toggleFullscreen() {
        this.isFullscreen = !this.isFullscreen;
  
        // 在下一个渲染周期调整图表大小
        this.$nextTick(() => {
          if (this.chart) {
            // 给DOM结构一些时间来调整
            setTimeout(() => {
              // 强制重新计算图表容器尺寸
              const container = this.$refs.chartContainer;
              if (container) {
                // 全屏时设置一个固定的大高度，确保撑满屏幕
                if (this.isFullscreen) {
                  container.style.height = `${window.innerHeight - 80}px`;
                } else {
                  container.style.height = '';
                }
              }
              this.chart.resize();
  
              // 全屏后重置图表并等待一小段时间后再次调整
              if (this.isFullscreen) {
                this.resetZoom();
  
                // 延迟一段时间再次调整，确保图表完全展开
                setTimeout(() => {
                  if (this.chart) {
                    this.chart.resize();
  
                    // 稍微调整一下缩放比例以触发完全重绘
                    const currentZoom = this.zoomLevel;
                    this.chart.setOption({
                      series: [{
                        zoom: currentZoom * 0.95
                      }]
                    });
  
                    setTimeout(() => {
                      this.chart.setOption({
                        series: [{
                          zoom: currentZoom
                        }]
                      });
                    }, 100);
                  }
                }, 300);
              }
            }, 200);
          }
        });
      },
      handleKeyDown(e) {
        // 按ESC键退出全屏
        if (e.key === 'Escape' && this.isFullscreen) {
          this.isFullscreen = false;
          this.$nextTick(() => {
            if (this.chart) {
              // 给DOM结构一些时间来调整
              setTimeout(() => {
                // 恢复正常模式下的容器高度
                const container = this.$refs.chartContainer;
                if (container) {
                  container.style.height = '';
                }
  
                this.chart.resize();
                this.resetZoom();
  
                // 延迟一段时间再次调整，确保图表完全适应新大小
                setTimeout(() => {
                  if (this.chart) {
                    this.chart.resize();
                  }
                }, 300);
              }, 200);
            }
          });
        }
      },
      loadECharts() {
        // 在Vue原型上已经有$echarts了，直接使用
        if (this.$echarts) {
          this.echartsLoaded = true;
          console.log('ECharts已通过Vue原型加载');
          return Promise.resolve();
        }
  
        console.error('Vue原型上未找到$echarts');
        return Promise.reject(new Error('Vue原型上未找到$echarts'));
      },
      async searchPerson() {
        this.chartError = null;
        // 重置展开节点集合
        this.expandedNodes = new Set();
        this.originData = null;
  
        // 模拟API调用，实际应用中应该调用后端API
        if (this.searchQuery.trim() === '') {
          return;
        }
  
        try {
          // 显示加载状态
          this.loading = true;
          
          // 调用实际API接口
          const response = await personApi('getPerson', {
            person_name: this.searchQuery,
          });
     
          // 检查响应状态
          if (response.code === 200) {
            // 处理成功响应
            const data = response.data;
            
            // 保存人物信息和事件数据
            this.selectedPerson = {
              name: data.person.name,
              gender: data.person.gender,
              ethnicity: data.person.ethnicity,
              political_status: data.person.political_status,
              marital_status: data.person.marital_status,
              birth_date: data.person.birth_date,
              party_join_date: data.person.party_join_date,
              enlistment_date: data.person.enlistment_date,
              discharge_date: data.person.discharge_date,
              native_place: data.person.native_place,
              education: data.person.education,
              graduation_institution: data.person.graduation_institution,
              skills_and_expertise: data.person.skills_and_expertise,
              events: data.events || [] // 确保 events 有默认值
            };
            
            // 保存 neo4j 图谱数据
            this.neo4jData = data.neo4jData;
            
            // 初始化图表
            this.$nextTick(() => {
              this.initChart();
              
              // 延迟执行一次重置，确保图表适应容器
              setTimeout(() => {
                this.resetZoom();
              }, 500);
            });
          }
        } catch (error) {
          // 处理异常
          console.error('获取数据出错:', error);
          this.$message.error('获取数据出错：' + (error.message || '未知错误'));
          this.chartError = '获取数据出错：' + (error.message || '未知错误');
        } finally {
          // 隐藏加载状态
          this.loading = false;
        }
      },
      // 设置人物数据并初始化图表
      setPersonData() {
        // 模拟数据，实际应用中应该从API获取
        this.selectedPerson = {
          name: '王程杰',
          gender: '男',
          grade: '汉',
          political_status: '中共党员',
          marital_status: '已婚',
          spouse: "李文静",
          organization: "中电光谷",
          position: "技术主管",
          birth_date: "1990-01-01",
          party_join_date: "2010-01-01",
          phone_number: "885812",
          military_rank: "中校",
          events: [
            {
              type: 'task',
              date: '2023-01-15',
              title: '项目任务',
              description: '负责XX项目的架构设计和技术选型'
            },
            {
              type: 'promotion',
              date: '2022-06-10',
              title: '晋升',
              description: '从开发工程师晋升为技术主管'
            },
            {
              type: 'task',
              date: '2022-03-22',
              title: '技术攻关',
              description: '解决了系统性能瓶颈问题'
            },
            {
              type: 'discipline',
              date: '2021-11-05',
              title: '警告',
              description: '因代码质量问题收到口头警告'
            }
          ],
  
        };
  
        // 确保DOM已经更新后再初始化图表
        this.$nextTick(() => {
          // 给DOM一点时间渲染
          setTimeout(() => {
            try {
              this.initChart();
              console.log('图表初始化成功');
            } catch (err) {
              console.error('初始化图表失败:', err);
              this.chartError = '初始化图表失败: ' + err.message;
            }
          }, 100);
        });
      },
      handleClose() {
        this.dialogVisible = false;
      },
  
  
      getNeo4jData() {
        if (!this.neo4jData) {
          return {
            ...this.options,
            series: [{
              ...this.options.series[0],
              data: [],
              categories: [],
              links: []
            }]
          };
        }
        
        // 处理从后端获取的数据
        const graphData = [];
        const nodeMap = {}; // 创建节点ID到索引的映射
        
        // 查找中心人物节点ID（symbol为zhongxin的节点）
        const centerPerson = this.neo4jData.person.find(p => p.symbol === 'zhongxin');
        const centerPersonId = centerPerson ? centerPerson.id : null;
        
        // 处理节点显示逻辑
        if (this.neo4jData.person && this.neo4jData.person.length > 0) {
          // 第一步：将所有节点添加到nodeMap，但不全部添加到graphData
          this.neo4jData.person.forEach((node, index) => {
            nodeMap[node.id] = {
              index: index,
              node: node,
              inGraph: false // 标记节点是否已添加到图中
            };
            
            // 同时支持通过名称查找
            if (node.name) {
              nodeMap[node.name] = {
                index: index,
                node: node,
                inGraph: false
              };
            }
          });
          
          // 第二步：先添加中心人物节点
          if (centerPersonId && nodeMap[centerPersonId]) {
            const node = nodeMap[centerPersonId].node;
            graphData.push({
              name: node.name,
              id: node.id,
              nodeInfo: {
                id: node.id,
                name: node.name,
                type: node.type
              },
              itemStyle: {
                color: node.color || "#fac455",
                borderColor: "#000000",
                borderWidth: 1
              },
              draggable: true,
              symbolSize: [30, 30],
              symbol: this.getSymbolPath(node.symbol)
            });
            
            nodeMap[centerPersonId].inGraph = true;
            nodeMap[centerPersonId].graphIndex = 0;
          }
          
          // 第三步：添加中心人物的一级直接关联节点
          // 获取与中心人物直接相连的链接
          const directLinks = centerPersonId ? 
            this.neo4jData.links.filter(link => 
              link.source === centerPersonId || link.target === centerPersonId
            ) : [];
          
          // 添加一级节点到图中
          directLinks.forEach(link => {
            const targetId = link.source === centerPersonId ? link.target : link.source;
            if (nodeMap[targetId] && !nodeMap[targetId].inGraph) {
              const node = nodeMap[targetId].node;
              graphData.push({
                name: node.name,
                id: node.id,
                nodeInfo: {
                  id: node.id,
                  name: node.name,
                  type: node.type
                },
                itemStyle: {
                  color: node.color || "#fac455",
                  borderColor: "#000000",
                  borderWidth: 1
                },
                draggable: true,
                symbolSize: [30, 30],
                symbol: this.getSymbolPath(node.symbol)
              });
              
              nodeMap[targetId].inGraph = true;
              nodeMap[targetId].graphIndex = graphData.length - 1;
            }
          });
          
          // 第四步：添加已展开节点的下级节点
          this.expandedNodes.forEach(expandedId => {
            if (!nodeMap[expandedId] || !nodeMap[expandedId].inGraph) return;
            
            // 获取与已展开节点直接相连的链接
            const expandedLinks = this.neo4jData.links.filter(link => 
              (link.source === expandedId || link.target === expandedId) && 
              // 确保链接的另一端不是中心人物（避免重复）
              !(link.source === centerPersonId || link.target === centerPersonId)
            );
            
            // 添加扩展节点
            expandedLinks.forEach(link => {
              const targetId = link.source === expandedId ? link.target : link.source;
              if (nodeMap[targetId] && !nodeMap[targetId].inGraph) {
                const node = nodeMap[targetId].node;
                graphData.push({
                  name: node.name,
                  id: node.id,
                  nodeInfo: {
                    id: node.id,
                    name: node.name,
                    type: node.type
                  },
                  itemStyle: {
                    color: node.color || "#fac455",
                    borderColor: "#000000",
                    borderWidth: 1
                  },
                  draggable: true,
                  symbolSize: [30, 30],
                  symbol: this.getSymbolPath(node.symbol)
                });
                
                nodeMap[targetId].inGraph = true;
                nodeMap[targetId].graphIndex = graphData.length - 1;
              }
            });
          });
        }
        
        // 处理连接关系 - 只显示图中已有节点之间的连接
        const processedLinks = [];
        if (this.neo4jData.links && this.neo4jData.links.length > 0) {
          this.neo4jData.links.forEach(link => {
            // 确保源节点和目标节点都在图中
            if (nodeMap[link.source] && nodeMap[link.source].inGraph && 
                nodeMap[link.target] && nodeMap[link.target].inGraph) {
              
              processedLinks.push({
                source: nodeMap[link.source].graphIndex,
                target: nodeMap[link.target].graphIndex,
                category: link.category
              });
            }
          });
        }
        
        // 处理分类信息
        const categories = [];
        if (this.neo4jData.categories && this.neo4jData.categories.length > 0) {
          this.neo4jData.categories.forEach(category => {
            categories.push({
              name: category.name
            });
          });
        }
        
        const newOptions = {
          ...this.options,
          series: [{
            ...this.options.series[0],
            // 修改边的标签配置
            type: "graph",
            roam: true,
            focusNodeAdjacency: true,
            force: {
              repulsion: 2000,
              edgeLength: [1000, 300]
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            lineStyle: {
              color: 'black',
              width: 1,
              fontSize: 12,
              normal: {
                cursor: "default"
              }
            },
            layout: "force",
            symbol: 'circle',
            normal: {
              lineStyle: {
                color: 'black',
                width: 1,
                type: 'solid',
                opacity: 1,
                curveness: 0.5
              }
            },
            label: {
              normal: {
                show: true,
                position: "bottom",
                formatter: (params) => {
                  // 检查节点是否有更多可展开的连接
                  const nodeId = params.data.id;
                  const hasMoreConnections = this.hasMoreConnections(nodeId);
                  
                  // 为可展开的节点添加+号标记
                  if (hasMoreConnections && !this.expandedNodes.has(nodeId)) {
                    return '{bg|' + params.name + ' +}';
                  }
                  return '{bg|' + params.name + '}';
                },
                rich: {
                  bg: {
                    padding: [3, 5],
                    borderRadius: 4,
                    backgroundColor: '#52606d',
                    borderColor: '#333',
                    borderWidth: 1,
                    color: '#fff'
                  }
                },
                textStyle: {
                  fontSize: 10,
                  color: 'black'
                }
              }
            },
            edgeLabel: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 10,
                  color: 'black'
                },
                formatter: function (param) {
                  return param.data.category;
                }
              }
            },
            // 添加处理好的数据
            data: graphData,
            links: processedLinks,
            categories: categories
          }]
        };
        return newOptions;
      },
  
      // 添加判断节点是否有更多连接的方法
      hasMoreConnections(nodeId) {
        if (!this.neo4jData || !this.neo4jData.links) return false;
        
        // 查找与该节点相关的所有链接
        const allConnections = this.neo4jData.links.filter(link => 
          link.source === nodeId || link.target === nodeId
        );
        
        // 查找当前已展示的链接数量
        let displayedConnections = 0;
        
        allConnections.forEach(link => {
          const otherEndId = link.source === nodeId ? link.target : link.source;
          
          // 中心人物节点
          const centerPerson = this.neo4jData.person.find(p => p.symbol === 'zhongxin');
          const centerPersonId = centerPerson ? centerPerson.id : null;
          
          // 如果是与中心节点的连接，肯定已显示
          if (otherEndId === centerPersonId) {
            displayedConnections++;
            return;
          }
          
          // 如果另一端节点已展开或在已展开节点中，则该连接已显示
          if (this.expandedNodes.has(otherEndId)) {
            displayedConnections++;
            return;
          }
          
          // 如果当前节点已展开，则所有相连节点应该都显示
          if (this.expandedNodes.has(nodeId)) {
            displayedConnections++;
            return;
          }
          
          // 处理特殊情况：如果两个节点都是一级节点（都直接连接到中心节点）
          const isOtherEndConnectedToCenter = this.neo4jData.links.some(l => 
            (l.source === centerPersonId && l.target === otherEndId) || 
            (l.target === centerPersonId && l.source === otherEndId)
          );
          
          const isNodeConnectedToCenter = this.neo4jData.links.some(l => 
            (l.source === centerPersonId && l.target === nodeId) || 
            (l.target === centerPersonId && l.source === nodeId)
          );
          
          if (isOtherEndConnectedToCenter && isNodeConnectedToCenter) {
            displayedConnections++;
          }
        });
        
        // 如果实际连接数大于已显示连接数，则有未显示的连接
        return allConnections.length > displayedConnections;
      },
  
      // 预处理数据，直接在数据中添加颜色属性
  
      async initChart() {
        await this.$nextTick();
        const chartDom = document.getElementById("main");
        if (!chartDom) return;
  
        // 清理旧图表
        if (this.chart) {
          this.chart.dispose();
        }
        
        // 保存原始完整数据，以便后续展开节点使用
        if (!this.originData && this.neo4jData) {
          this.originData = JSON.parse(JSON.stringify(this.neo4jData));
        }
        
        // 初始化图表
        this.chart = this.$echarts.init(chartDom);
  
        // 获取图表配置
        let options = this.getNeo4jData();
  
        // 设置图表配置
        this.chart.setOption(options);
  
        // 添加点击事件处理
        this.chart.on('click', (params) => {
          if (params.dataType === 'node') {
            // 如果点击的是节点
            const nodeData = params.data;
            console.log('Clicked node:', nodeData);
            
            // 节点展开/收起逻辑
            this.toggleNodeExpand(nodeData.id);
          }
        });
  
        // 处理图表交互
        this.chart.on('graphRoam', () => {
          // 更新当前缩放级别
          const opt = this.chart.getOption();
          if (opt.series[0].zoom) {
            this.zoomLevel = opt.series[0].zoom;
          }
        });
      },
  
      // 修改节点展开/收起的方法
      toggleNodeExpand(nodeId) {
        // 获取中心人物节点ID
        const centerPerson = this.neo4jData.person.find(p => p.symbol === 'zhongxin');
        const centerPersonId = centerPerson ? centerPerson.id : null;
        
        // 如果点击的是中心人物节点，不执行任何操作
        if (nodeId === centerPersonId) {
          return;
        }
        
        if (this.expandedNodes.has(nodeId)) {
          // 如果节点已展开，则收起
          this.expandedNodes.delete(nodeId);
        } else {
          // 如果节点未展开，则展开
          this.expandedNodes.add(nodeId);
        }
        
        // 重新渲染图表
        if (this.chart) {
          // 获取当前配置
          const options = this.getNeo4jData();
          // 应用新配置
          this.chart.setOption(options);
        }
      },
  
      // 修改全屏模式的点击处理
      clickFullScreen() {
        this.dialogVisible = true;
  
        this.$nextTick(() => {
          const chartContainer = document.getElementById("mainfull");
          if (!chartContainer) return;
  
          // Initialize the fullscreen chart
          const fullScreenChart = this.$echarts.init(chartContainer);
  
          // Get the chart options
          const options = this.getNeo4jData();
  
          // Set the options to the chart
          fullScreenChart.setOption(options);
          
          // 添加节点点击处理
          fullScreenChart.on('click', (params) => {
            if (params.dataType === 'node') {
              // 如果点击的是节点
              const nodeData = params.data;
              
              // 节点展开/收起逻辑
              this.toggleNodeExpand(nodeData.id);
              
              // 更新全屏图表
              const newOptions = this.getNeo4jData();
              fullScreenChart.setOption(newOptions);
            }
          });
  
          // Add resize handler
          const resizeHandler = () => {
            if (this.dialogVisible) {
              fullScreenChart.resize();
            }
          };
  
          // Listen for window resize
          window.addEventListener('resize', resizeHandler);
  
          // Clean up when dialog closes
          this.$once('hook:beforeDestroy', () => {
            window.removeEventListener('resize', resizeHandler);
            fullScreenChart.dispose();
          });
  
          // Force a resize after a short delay to ensure proper rendering
          setTimeout(() => {
            fullScreenChart.resize();
          }, 200);
        });
      },
  
      // 创建背景图案
      createPatternImage() {
        const canvas = document.createElement('canvas');
        canvas.width = 20;
        canvas.height = 20;
        const ctx = canvas.getContext('2d');
  
        // 填充白色背景
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, 20, 20);
  
        // 绘制点状图案
        ctx.fillStyle = 'rgba(0, 0, 0, 0.02)';
        ctx.beginPath();
        ctx.arc(10, 10, 0.8, 0, Math.PI * 2);
        ctx.fill();
  
        return canvas.toDataURL();
      },
      // 缩放控制
      zoomIn() {
        if (!this.chart) return;
  
        this.zoomLevel *= 1.2;
        this.chart.setOption({
          series: [{
            zoom: this.zoomLevel
          }]
        });
      },
      zoomOut() {
        if (!this.chart) return;
  
        console.log(option)
  
        this.zoomLevel /= 1.2;
        this.chart.setOption(option);
      },
      resetZoom() {
        if (!this.chart) return;
  
        this.zoomLevel = 1;
  
        // 先调整图表大小以适应容器
        this.chart.resize();
  
        // 短暂延迟后强制更新图表
        setTimeout(() => {
          // 先将缩放设为稍小值，触发完整重绘
          this.chart.setOption({
            series: [{
              zoom: 0.9
            }]
          });
  
          // 然后设置为标准大小
          setTimeout(() => {
            this.chart.setOption({
              series: [{
                zoom: 1
              }]
            });
          }, 100);
        }, 50);
      },
      resizeChart() {
        if (this.chart) {
          this.chart.resize();
          // 如果图表已经初始化，延迟调整一次缩放
          setTimeout(() => {
            // 轻微调整缩放以触发重绘
            this.chart.setOption({
              series: [{
                zoom: this.zoomLevel * 0.99
              }]
            });
            // 然后恢复正常缩放
            setTimeout(() => {
              this.chart.setOption({
                series: [{
                  zoom: this.zoomLevel
                }]
              });
            }, 50);
          }, 150);
        }
      },
      getSymbolPath(symbolName) {
        if (!symbolName) {
          return 'circle'; // 默认使用圆形
        }
        
        // 如果是以 image:// 或 path:// 开头，说明已经是完整路径，直接返回
        if (symbolName.startsWith('image://') || symbolName.startsWith('path://')) {
          return symbolName;
        }
        
        // 根据图标名称返回对应的图标路径
        switch(symbolName) {
          case 'grxx':
            return 'image://' + grxx;
          case 'xgjg':
            return 'image://' + xgjg;
          case 'xgrw':
            return 'image://' + xgrw;
          case 'jx':
            return 'image://' + jx;
          case 'gbrm':
            return 'image://' + gbrm;
          case 'jc':
            return 'image://' + jc;
          case 'zydj':
            return 'image://' + zydj;
          case 'xgda':
            return 'image://' + xgda;
          case 'zhongxin':
            return 'image://' + zhongxin;
          case 'zzlsbq':
            return 'image://' + zzlsbq;
          case 'xgsj':
            return 'image://' + xgsj;
          // 使用现有图标替代缺失的图标
          case 'shgx':
            return 'image://' + xgrw; // 使用人物关系图标替代社会关系图标
          case 'cgsj':
            return 'image://' + xgsj; // 使用事件图标替代出国事件图标
          case 'jspj':
            return 'image://' + jx;   // 使用军衔图标替代晋升评价图标
          case 'jcsj':
            return 'image://' + jc;   // 使用奖惩图标
          case 'pj':
            return 'image://' + pj;
          case 'zwbd':
            return 'image://' + grxx;
          default:
            return 'circle'; // 默认使用圆形
        }
      },
      scrollTabs(direction) {
        // 获取tabs容器
        const tabsContainer = this.$el.querySelector('.event-tabs');
        if (!tabsContainer) return;
        
        // 计算滚动距离（一次滚动100px）
        const scrollAmount = 100;
        
        // 根据方向滚动
        if (direction === 'left') {
          tabsContainer.scrollBy({
            left: -scrollAmount,
            behavior: 'smooth'
          });
        } else {
          tabsContainer.scrollBy({
            left: scrollAmount,
            behavior: 'smooth'
          });
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .person-viewer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-color: #f0f2f5;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #2c3e50;
    overflow: hidden;
  }
  
  .search-section {
    padding: 12px 20px;
    background-color: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    flex: 0 0 auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    position: relative;
  }
  
  .search-container {
    display: flex;
    max-width: 500px;
    margin: 0 auto 0 0;
    padding-left: 20px;
  }
  
  .search-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #e4e7ed;
    border-radius: 8px 0 0 8px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    background-color: #f5f7fa;
    color: #606266;
  }
  
  .search-input:focus {
    border-color: #409eff;
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2),
      inset 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  .search-button {
    padding: 12px 24px;
    background: linear-gradient(135deg, #409eff, #146ce0);
    color: white;
    border: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
  }
  
  .search-button:hover {
    background: linear-gradient(135deg, #66b1ff, #3a8ee6);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
    transform: translateY(-1px);
  }
  
  .content-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    flex: 1;
    height: calc(100vh - 165px); /* 减去搜索栏的高度 */
    overflow: hidden;
  }
  
  @media (min-width: 1024px) {
    .content-container {
      flex-direction: row;
      align-items: stretch;
      height: calc(100vh - 165px);
    }
  
    .chart-section {
      width: 70%;
      height: 100%;
    }
  
    .info-section {
      width: 30%;
      height: 100%;
    }
  }
  
  .chart-section {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .info-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
  }
  
  .info-card,
  .events-card,
  .chart-card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.03);
  }
  
  .info-card:hover,
  .events-card:hover,
  .chart-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    border-color: rgba(64, 158, 255, 0.1);
  }
  
  .info-content {
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    flex: 1;
  }
  
  .info-content::-webkit-scrollbar,
  .event-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  .info-content::-webkit-scrollbar-track,
  .event-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  .info-content::-webkit-scrollbar-thumb,
  .event-list::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 3px;
    transition: all 0.2s;
  }
  
  .info-content::-webkit-scrollbar-thumb:hover,
  .event-list::-webkit-scrollbar-thumb:hover {
    background: #c0c4cc;
  }
  
  .chart-container {
    flex: 1;
    padding: 10px;
    width: 100%;
    min-height: 500px;
    height: calc(100% - 110px) !important; /* 调整非全屏时的高度 */
    background-color: #ffffff;
    border-radius: 0 0 12px 12px;
    position: relative;
    overflow: hidden;
  }
  
  .card-title {
    margin: 0;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #ebeef5;
    color: #2c3e50;
    background: linear-gradient(to right, #fafafa, #f5f7fa);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    letter-spacing: 0.5px;
  }
  
  .chart-legend {
    display: flex;
    padding: 12px 20px;
    gap: 24px;
    border-bottom: 1px solid #ebeef5;
    background: linear-gradient(to right, #fafafa, #f5f7fa);
    flex-wrap: wrap;
  }
  
  .legend-item {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #606266;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
  }
  
  .legend-item:hover {
    background-color: rgba(64, 158, 255, 0.1);
  }
  
  .legend-color {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .center-color {
    background: linear-gradient(135deg, #1890ff, #36cbcb);
  }
  
  .person-color {
    background: linear-gradient(135deg, #52c41a, #b7eb8f);
  }
  
  .org-color {
    background: linear-gradient(135deg, #fa8c16, #ffd591);
  }
  
  .chart-controls {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 30px;
    right: 30px;
    gap: 8px;
    z-index: 200;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 8px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: all 0.25s ease;
  }
  
  .chart-controls:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  }
  
  .control-button {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(200, 200, 200, 0.3);
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    color: #666;
    font-weight: normal;
  }
  
  .control-button::before {
    content: none; /* 移除之前的光泽效果 */
  }
  
  .control-icon {
    font-size: 16px;
    transition: transform 0.2s ease;
  }
  
  .control-button:hover {
    transform: translateY(-2px);
    background-color: #f8f8f8;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.08);
  }
  
  .control-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  
  .control-button:hover .control-icon {
    transform: scale(1.15);
  }
  
  /* 特定按钮样式 - 使用更柔和的颜色 */
  .control-button:nth-child(1) {
    /* 放大按钮 */
    color: #6cc067;
  }
  
  .control-button:nth-child(2) {
    /* 缩小按钮 */
    color: #e77471;
  }
  
  .control-button:nth-child(3) {
    /* 重置按钮 */
    color: #e4a663;
  }
  
  .control-button:nth-child(4) {
    /* 全屏按钮 */
    color: #69a9e0;
  }
  
  /* 全屏模式下的控制按钮 */
  .chart-section.fullscreen .chart-controls {
    bottom: 40px;
    right: 40px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }
  
  .info-item {
    display: flex;
    margin-bottom: 16px;
    padding: 8px 12px;
    border-bottom: 1px dashed #f0f0f0;
    transition: all 0.2s ease; /* 缩短过渡时间 */
    border-radius: 2px; /* 减小圆角 */
  }
  
  .info-item:hover {
    background-color: rgba(64, 158, 255, 0.08); /* 稍微调整背景色透明度 */
    padding: 8px 12px 8px 16px; /* 减小左侧padding的变化幅度 */
    border-bottom-color: rgba(64, 158, 255, 0.15);
  }
  
  .info-label {
    min-width: 80px;
    color: #606266;
    font-weight: 500;
  }
  
  .info-value {
    color: #303133;
    flex: 1;
    font-weight: 500;
    font-size: 13px;
  }
  
  .events-content {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  .event-tabs-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #fafafa;
    border: none !important; /* 确保没有边框 */
    border-bottom: none !important; /* 确保底部没有边框 */
    margin-bottom: 5px; /* 添加一些底部间距 */
  }
  
  .event-tabs {
    padding: 0 28px;
    display: flex;
    flex-shrink: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    border: none !important;
    border-bottom: none !important;
    background-color: transparent;
  }
  
  /* 完全隐藏Webkit浏览器的滚动条 */
  .event-tabs::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
  }
  
  .event-tabs::-webkit-scrollbar-track {
    display: none;
  }
  
  .event-tabs::-webkit-scrollbar-thumb {
    display: none;
  }
  
  .tab-scroll-indicator {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(250, 250, 250, 0.9);
    cursor: pointer;
    color: #909399;
    width: 24px;
    z-index: 10;
    border: none !important; /* 确保没有边框 */
  }
  
  .tab-scroll-left {
    left: 0;
    box-shadow: none;
  }
  
  .tab-scroll-right {
    right: 0;
    box-shadow: none;
  }
  
  .tab-scroll-indicator:hover {
    color: #409eff;
    background-color: rgba(245, 245, 245, 0.95);
  }
  
  /* 修改所有可能存在的边框样式 */
  .event-tab.active::after {
    background-color: #409eff;
    box-shadow: none; /* 移除阴影，可能会导致视觉边框效果 */
  }
  
  /* 移除事件列表的顶部边框 */
  .event-list {
    border-top: none !important;
  }
  
  .event-tab {
    padding: 12px 16px;
    cursor: pointer;
    color: #606266;
    font-size: 14px;
    transition: all 0.3s;
    position: relative;
    opacity: 0.8;
    flex-shrink: 0;  /* 防止标签被挤压 */
    display: inline-block;  /* 确保标签在一行显示 */
    text-align: center;
    min-width: 80px; /* 确保每个标签有最小宽度 */
  }
  
  .event-tab:hover {
    color: #409eff;
    background-color: rgba(64, 158, 255, 0.05);
    opacity: 1;
  }
  
  .event-tab.active {
    color: #409eff;
    font-weight: 500;
    opacity: 1;
  }
  
  .event-tab.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background-color: #409eff;
    border-radius: 1px;
    box-shadow: 0 1px 4px rgba(64, 158, 255, 0.3);
  }
  
  .event-list {
    padding: 12px 20px;
    flex: 1;
    overflow-y: auto;
    min-height: 50px;
  }
  
  .event-item {
    display: flex;
    padding: 12px 10px;
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 6px;
    margin-bottom: 8px;
  }
  
  .event-item:hover {
    background-color: #f9f9f9;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  .event-item:last-child {
    border-bottom: none;
  }
  
  .event-date {
    min-width: 100px;
    color: #909399;
    font-size: 13px;
    font-weight: 500;
    padding-right: 10px;
    border-right: 2px solid #ebeef5;
    display: flex;
    align-items: center;
  }
  
  .event-content {
    margin-left: 10px;
    flex: 1;
  }
  
  .event-title {
    font-weight: 600;
    margin-bottom: 6px;
    color: #303133;
    transition: color 0.2s;
  }
  
  .event-item:hover .event-title {
    color: #409eff;
  }
  
  .event-description {
    color: #606266;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 4px;
  }
  
  .no-events {
    text-align: center;
    color: #909399;
    padding: 30px 0;
    font-size: 14px;
  }
  
  .chart-error {
    text-align: center;
    color: #f56c6c;
    padding: 20px;
    font-size: 14px;
    background-color: #fef0f0;
    border-radius: 4px;
    margin: 20px;
  }
  
  /* 空状态样式 */
  .empty-chart {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .empty-chart-content,
  .empty-info-content,
  .empty-events-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
  }
  
  .empty-title {
    font-size: 18px;
    color: #5e6d82;
    margin-bottom: 8px;
    font-weight: 500;
  }
  
  .empty-desc {
    font-size: 14px;
    color: #909399;
    margin-bottom: 24px;
    line-height: 1.6;
  }
  
  .sample-search {
    margin-top: 20px;
    text-align: center;
  }
  
  .sample-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
  }
  
  .sample-tag {
    display: inline-block;
    padding: 6px 12px;
    background-color: #f0f2f5;
    color: #606266;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .sample-tag:hover {
    background-color: #e6f7ff;
    color: #409eff;
  }
  
  .empty-info,
  .empty-events {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
  }
  
  .event-tabs {
    flex-shrink: 0; /* 防止tabs被压缩 */
  }
  
  .card-title {
    flex-shrink: 0; /* 防止标题被压缩 */
  }
  
  /* 全屏模式样式 */
  .chart-section.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100vh !important;
    z-index: 1000;
    padding: 0;
    background-color: #f5f7fa;
  }
  
  .chart-section.fullscreen .chart-container {
    height: calc(100vh - 110px) !important; /* 调整高度，减去标题和图例的高度 */
    position: relative;
    padding: 20px 40px 20px 240px;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .chart-section.fullscreen .chart-card {
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  .chart-section.fullscreen .card-title {
    padding: 15px 15px 15px 240px;
    height: 50px; /* 固定标题高度 */
  }
  
  .chart-section.fullscreen .chart-legend {
    padding: 10px 15px 10px 240px;
    height: 60px; /* 固定图例高度 */
  }
  
  /* 全屏模式下修改图表控制按钮位置 */
  .chart-section.fullscreen .chart-controls {
    bottom: 40px;
    right: 40px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    z-index: 1010;
  }
  
  .chart-card {
    display: flex;
    flex-direction: column;
    height: 100% !important; /* 确保卡片占满容器高度 */
    position: relative;
  }
  
  .full-screen-chart {
    width: 100%;
    height: calc(100vh - 60px) !important;
    margin: 0;
    padding: 0;
  }
  
  .el-dialog {
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    overflow: hidden;
  }
  
  .el-dialog__body {
    flex: 1;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }
  
  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
  
  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #409eff;
    animation: spin 1s ease-in-out infinite;
  }
  
  .loading-text {
    margin-top: 10px;
    font-size: 14px;
    color: #333;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  
  /* 以下样式会覆盖上面的样式 */
  .events-card {
    border: none !important;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    background-color: #fff;
    border-radius: 4px;
  }
  
  .card-title {
    padding: 12px 15px;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    position: relative;
    border-bottom: none !important; /* 确保没有底部边框 */
  }
  
  /* 清除所有元素上的滚动条的下滑线或边框 */
  .el-scrollbar__wrap,
  .el-scrollbar,
  .el-scrollbar__bar,
  .el-scrollbar__thumb {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }
  
  .events-content {
    border-top: none !important;
  }
  </style>